<!doctype html>
<html lang="CH">
    <head>
        <meta charset="UTF-8">
        <title>楚瑞涛的博客-<?php echo $title ?></title>
        <meta name="keywords" content="个人博客,楚瑞涛"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href= <?php echo HOME_CSS.'base.css' ?> rel="stylesheet">
        <link href= <?php echo HOME_CSS.'index.css' ?> rel="stylesheet">
        <link href= <?php echo HOME_CSS.'info.css' ?> rel="stylesheet">
        <link href= <?php echo HOME_CSS.'m.css' ?> rel="stylesheet">
        <script src= <?php echo HOME_JS.'jquery.min.js' ?> type="text/javascript"></script>
        <script src=<?php echo HOME_JS.'comm.js'?> type="text/javascript" ></script>
    </head>
    <body>
        <header class="header-navigation" id="header">
            <nav>
                <div class="logo">
                    <a href=<?php echo HOME_PATH.'index.php' ?> >楚瑞涛博客</a>
                </div>
                <h2 id="mnavh">
                    <span class="navicon"></span>
                </h2>
                <ul id="starlist">
                    <li>
                        <a href=<?php echo HOME_PATH.'index.php'?> >网站首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">我的相册</a>
                    </li>
                    <li>
                        <a href="javascript:;">我的日记</a>
                    </li>
                    <li>
                        <a href="javascript:;">关于我</a>
                    </li>
                    <li>
                        <a href="javascript:;">留言</a>
                    </li>
                    <li>
                        <a href="javascript:;">以上内容待补充</a>
                    </li>
                </ul>
            </nav>
        </header>
        <article>
            <aside id ="info_aside" class="l_box">
                <!-- <div class="fenlei">
                    <h2>文章分类</h2>
                    <ul id="types"></ul>
                </div> -->
                <div class="tuijian">
                    <h2>站长推荐</h2>
                    <ul id="recommend"></ul>
                </div>
                <div class="tuijian">
                    <h2>点赞排行</h2>
                    <ul id="praises"></ul>
                </div>
                <!-- <div class="cloud">
                    <h2>标签云</h2>
                    <ul id="targets"></ul>
                </div> -->
                <div class="guanzhu">
                    <h2>关注我的杂货铺</h2>
                    <ul>
                        <img src=<?php echo HOME_IMG.'wx.jpg' ?> />
                    </ul>
                </div>
            </aside>
            <main>
                <div class="infosbox">
                    <div class="newsview">
                        <h3 class="news_title"><?php echo $title ?></h3>
                        <div class="bloginfo">
                            <ul>
                                <input id="b_id" type="hidden" value=<?php echo $id ?> />
                                <li class="author">
                                    作者：<a href="javascript:;"><?php echo $name ?></a>
                                </li>
                                <li class="lmname">
                                    <a href="javascript:;"><?php echo $blog_type ?></a>
                                </li>
                                <li class="timer">时间：<?php echo $time ?></li>
                                <li class="view"><?php echo $reader ?>人已阅读</li>
                            </ul>
                        </div>
                        <div id="tags" class="tags"></div>
                        <?php 
                            if($outline !=''){
                                echo "<div class=\"news_about\"><strong>简介</strong>{$outline}</div>";
                            }
                        ?>
                        <div class="news_con">
                            <?php echo $content ?>
                        </div>
                    </div>
                    <div class="share">
                        <p class="diggit">
                            <a href="javascript:;">很赞哦！ </a>
                            <b>（<span  id="diggnum"><?php echo $praise_count ?></span>）</b>
                        </p>
                    </div>
                    <!-- <div class="nextinfo">
                        <p>
                            上一篇：<a href="/news/life/2018-03-13/804.html">作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</a>
                        </p>
                        <p>
                            下一篇：<a href="/news/life/">返回列表</a>
                        </p>
                    </div> -->
                    <div class="news_pl">
                        <h2>文章评论</h2>
                        <div id="comm_replay" class="gbko">
                        </div>
                    </div>
                </div>
            </main>
        </article>
        <footer>
            <p>
                Design by <a href="javascript:;" target="_blank">楚瑞涛</a>
                <a href="javascript:;">河南科技学院</a>
            </p>
        </footer>
        <a href="#" class="cd-top">Top</a>
    </body>
<script>
    //更换二维码图片文字
    function changeCode(obj){
        $(obj).attr('src','/blog_system/home/view/tool/getCodeImg.php?r='+Math.random());
    }
    //评论功能
    function comment_replay(){
        var u_name = $("#username").val().trim();
        var e_mail = $("#email").val().trim();
        var code = $("#code").val().trim();
        var mess = $("#saytext").val().trim();
        if(check_comment(code,u_name,e_mail,mess)){
            var code_flag = false;
            $.ajax({        //判断验证码是否正确
                async:false,     //异步请求
                url:'/blog_system/home/view/tool/checkCode.php',
                type:'POST',
                data:{
                    code:code
                },
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    if(result == 1){
                        code_flag = true;
                    }else{
                        changeCode($("#code").parent().find('.code'));
                    }
                }
            });
            if(!code_flag){
                alert("验证码不正确");
            }else{
                var portrait = Math.floor(Math.random()*10+1);
                var data = {
                    user_name:u_name,
                    user_mail:e_mail,
                    user_portrait:portrait,
                    content:mess,
                    blog_id:$("#b_id").val()
                }
                $.ajax({
                    async:true,     //异步请求
                    url:'/blog_system/home/index.php/Comment/submitComment',
                    type:'POST',
                    contentType: "application/x-www-form-urlencoded;charset=utf-8",
                    data:data,
                    success:function(result){
                        if(result){
                            $("#comm_replay").append('<div class="fb"><ul style="background: url(/blog_system/home/view/images/tx/tx'+portrait+'.jpg) no-repeat top 20px left 10px;"><p class="fbtime"><span>'+new Date().format("yyyy-MM-dd hh:mm")+'</span>'+
                                u_name+'</p><p class="fbinfo">'+mess+'</p></ul><div class="function"><input type="hidden" value='+result+' /><p class="pointer" onclick="praise_comment(this)" ><img src="/blog_system/home/view/images/zan.png">赞</p><p><span>0</span>人赞</p><p onclick="review(this)" class="pointer"><img src="/blog_system/home/view/images/pinglun.png">评论</p></div><div class="replay"></div></div>');
                            $("#username").val('');
                            $("#email").val('');
                            $("#code").val('');
                            $("#saytext").val('');
                            $("#commment_count").html(parseInt($("#commment_count").html())+1);
                            changeCode($("#code").parent().find('.code'));
                        }else{
                            alert('评论失败！');
                        }
                    }
                });
            }
        }
    }
    //评论点赞功能
    function praise_comment(obj){
        if(obj){
            var id = $(obj).parent().find('input').val();
            if(id){
                //判断本地数据
                var flag = true;
                var ls = window.localStorage;        //获取 localStorage 对象
                var commentPraise = JSON.parse(ls.getItem('comment-praise'));
                if(commentPraise  != null){
                    checkLSAll(ls,'comment-praise',commentPraise);     //判断时间
                    if(checkLS(commentPraise,id)){
                        flag = false;
                        alert("您已经点过赞了，明天再来吧");
                    }else{
                        var praiseItem = new Array();
                        praiseItem.push(id);
                        praiseItem.push(Number(new Date())+(1*24*60*60*1000));
                        commentPraise.push(praiseItem);
                        ls.setItem("comment-praise",JSON.stringify(commentPraise));
                    }
                }else{
                    commentPraise = new Array();
                    var praiseItem = new Array();
                    praiseItem.push(id);
                    praiseItem.push(Number(new Date())+(1*24*60*60*1000));
                    commentPraise.push(praiseItem);
                    ls.setItem("comment-praise",JSON.stringify(commentPraise));
                }
                if(flag){
                    var count = $(obj).parent().find('span');
                    $.ajax({
                        async:true,     //异步请求
                        url:'/blog_system/home/index.php/Comment/addPrasise?id='+id,
                        type:'POST',
                        contentType: "application/x-www-form-urlencoded;charset=utf-8",
                        success:function(result){
                            if(result){
                                if(result = 1){
                                    alert('点赞成功');
                                    count.html(parseInt(count.html())+1);
                                }
                            }
                        }
                    });
                }
            }
        }
    }
    //评赞追评功能
    function review(obj){
        if($(obj).parent().parent().find(".replay").find(".plpost").length == 0){
            var replay = $(obj).parent().parent().find(".replay");
            replay.prepend('<div class="plpost" style="margin:0" ><p class="yname"><span>昵&nbsp;&nbsp;&nbsp;称：</span><input type="text" class="inputText username" size="16"></p><p class="yzm"><span>邮&nbsp;&nbsp;&nbsp;箱：</span><input type="text" class="inputText email" value="" size="16"></p>'+
                    '<textarea rows="6" class="saytext"></textarea><input onclick="comment_rewiew(this)" type="button" value="提交"><input style="margin-right: 20px;" onclick="colse_rewiew(this)" type="button" value="取消"></div>');
        }
    }
    //关闭追评论
    function colse_rewiew(obj){
        $(obj).parent().remove();
    }
    //提交追评
    function comment_rewiew(obj){
        var mess_obj = $(obj).parent();
        console.log(mess_obj);
        var comment_id = mess_obj.parent().parent().find(".function").find('input').val();
        var u_name = mess_obj.find('.username').val().trim();
        var e_mail = mess_obj.find('.email').val().trim();
        var mess = mess_obj.find('.saytext').val().trim();
        if(check_comment(code,u_name,e_mail,mess)){
            var data = {
                user_name:u_name,
                user_mail:e_mail,
                content:mess,
                comment_id:comment_id,
                blog_id:$("#b_id").val()
            }
            console.log(data);
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Comment/commentReplay',
                type:'POST',
                data:data,
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    if(result){
                        mess_obj.parent().prepend('<div><p class="fbtime"><span>'+new Date().format("yyyy-MM-dd hh:mm")+'</span>'+u_name+'</p><p class="fbinfo">'+mess+'</p></div>');
                        mess_obj.remove();

                    }else{
                        alert('评论失败，请检查评论内容');
                    }
                }
            });
        }
    }
    //判断留言内容是否填写正确完整
    function check_comment(code,u_name,e_mail,mess){
        var flag = false;
        var uPattern = /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/;
        var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        if(!code){
            alert("请输入验证码");
        }else if(!u_name){
            alert("请输入昵称");
        }else if(!e_mail){
            alert("请输入邮箱");
        }else if(!mess){
            alert("请输入留言内容");
        }else if(!uPattern.test(u_name)){
            alert("用户名不能含有特殊字符，且长度不能超过10");
        }else if(!ePattern.test(e_mail) || e_mail.length>25){
            alert("请输入正确的邮箱");
        }else if(mess.length>100){
            alert("留言内容太长了（100字以内）");
        }else{
            flag = true;
        }
        return flag;
    }

    //判断记录是否超时
    function checkLSAll(ls,name,data){
        var currTime = Number(new Date());      //获取当前时间戳
        for(var i=0;i<data.length;i++){
            if (data[i][1] <= currTime){
                data.splice(i, 1);
                console.log("删除记录");
            }
        }
        ls.setItem(name,JSON.stringify(data));
    }
    //判断本地是否有记录
    function checkLS(data,id){
        var flag=false;
        var data_len = data.length;
        for(var i=0;i<data_len;i++){
            if (data[i][0] == id){
                flag=true;
                break;
            }
        }
        return flag;
    }
    $(function(){
        //日期自定义格式化
        Date.prototype.format = function (format) {
            var args = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
                "S": this.getMilliseconds()
            };
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var i in args) {
                var n = args[i];
                if (new RegExp("(" + i + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
            }
            return format;
        };
        var blogId = $("#b_id").val();      //获取文章ID
        //加载 localStorage
        var readFlag = true;
        if(blogId != undefined){        //判断是否为空
            var ls = window.localStorage;        //获取 localStorage 对象
            var readed = JSON.parse(ls.getItem('readed'));
            if(readed != null && readed.length != 0){
                checkLSAll(ls,'readed',readed);     //判断时间
                if(!checkLS(readed,blogId)){
                    readedItem = new Array()
                    readedItem.push(blogId);
                    readedItem.push(Number(new Date())+(1*24*60*60*1000));
                    readed.push(readedItem);
                    ls.setItem("readed",JSON.stringify(readed));
                }else{
                    readFlag=false;
                }
            }else{
                readed = new Array();
                var readedItem = new Array();
                readedItem.push(blogId);
                readedItem.push(Number(new Date())+(1*24*60*60*1000));
                readed = new Array();
                readed.push(readedItem);
                ls.setItem("readed",JSON.stringify(readed));
            }
        }else{
            readFlag=false;
        }
        if(readFlag){
            $.ajax({
                async:true,  //异步执行
                url:'/blog_system/home/index.php/Blog/addCount/?type=1&id='+blogId,      //增加阅读数量
                type:"POST"
            });
        }
        //文章点赞功能
        $(".diggit").click(function(){
            var flag = true;
            if(blogId != undefined){        //判断是否为空
                var ls = window.localStorage;        //获取 localStorage 对象
                var praise = JSON.parse(ls.getItem('praise'));
                if(praise  != null){
                    checkLSAll(ls,'praise',praise);     //判断时间
                    if(checkLS(praise,blogId)){
                        flag = false;
                        alert("您已经点过赞了，明天再来吧");
                    }else{
                        var praiseItem = new Array();
                        praiseItem.push(blogId);
                        praiseItem.push(Number(new Date())+(1*24*60*60*1000));
                        praise.push(praiseItem);
                        ls.setItem("praise",JSON.stringify(praise));
                    }
                }else{
                    praise = new Array();
                    var praiseItem = new Array();
                    praiseItem.push(blogId);
                    praiseItem.push(Number(new Date())+(1*24*60*60*1000));
                    praise.push(praiseItem);
                    ls.setItem("praise",JSON.stringify(praise));
                }
            }
            if(flag){
                $.ajax({
                    async:true,  //异步执行
                    url:'/blog_system/home/index.php/Blog/addCount/?type=2&id='+blogId,      //增加点赞数量
                    type:"POST",
                    success:function(result){
                        if(result != 404){
                            alert("点赞成功");
                            $("#diggnum").html(parseInt($("#diggnum").html())+1);       //渲染页面 点赞数量
                        }else{
                            alert("点赞失败");
                        }
                    }
                });
            }
        })
        if(blogId != undefined){
            //请求博客标签数据
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Target/getTargetJson?id='+$("#b_id").val(),
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        $("#tags").append('<div style="display: inline-block;padding: 5px 0;"><a href="javascript:;" target="_blank">'+data[i].target+'</a></div>');
                    }
                }
            })
            //请求点击排行数据
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Blog/queryJson?type=1',
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    console.log(data);
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        $("#praises").append('<li><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'" title="'+data[i].title+'">'+data[i].title+'</a></li>');
                    }
                }
            })
            //请求推荐数据
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Blog/queryJson?type=2',
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    console.log(data);
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        $("#recommend").append('<li><a href="/blog_system/home/index.php/Blog/getBlog/id/'+data[i].id+'" title="'+data[i].title+'">'+data[i].title+'</a></li>');
                    }
                }
            })
            //请求类别数据
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Blog/queryJson?type=3',
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    var len = data.length;
                    for(var i=0;i<len;i++){
                        $("#types").append('<li><a onclick=alert("请回主页使用此功能"); href="javascript:;'+data[i].id+'">'+data[i].name+'（'+data[i].count+'）</a></li>');
                    }
                }
            })
            // //请求热门标签
            // $.ajax({
            //     async:true,     //异步请求
            //     url:'/blog_system/home/index.php/Target/queryTargetJson',
            //     type:'POST',
            //     contentType: "application/x-www-form-urlencoded;charset=utf-8",
            //     success:function(result){
            //         var data = JSON.parse(result);
            //         var len = data.length;
            //         for(var i=0;i<len;i++){
            //             $("#targets").append('<a href="javascript:;'+data[i].id+'">'+data[i].target+'</a>');
            //         }
            //     }
            // })
            //获取评论信息
            $.ajax({
                async:true,     //异步请求
                url:'/blog_system/home/index.php/Comment/queryComment/id/'+blogId,
                type:'POST',
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                success:function(result){
                    var data = JSON.parse(result);
                    console.log(data);
                    for(var i=0;i<data.length;i++){
                        var comm = '<div class="fb"><ul style="background: url(/blog_system/home/view/images/tx/tx'+data[i].user_portrait+'.jpg) no-repeat top 20px left 10px;">'+
                                '<p class="fbtime"><span>'+data[i].time+'</span>'+data[i].user_name+'</p><p class="fbinfo">'+data[i].content+'</p></ul>'+
                                '<div class="function"><input type="hidden" value="'+data[i].id+'"><p onclick="praise_comment(this)" class="pointer"><img src=<?php echo HOME_IMG."zan.png" ?> />赞</p><p><span>'+data[i].praise_count+'</span>人赞</p><p onclick="review(this)" class="pointer" ><img src=<?php echo HOME_IMG."pinglun.png" ?> />评论</p></div>'
                        if(data[i].replay != undefined){
                            comm+='<div class="replay">'
                            for(var j=0;j<data[i].replay.length;j++){
                                comm+='<div><p class="fbtime"><span>'+data[i].replay[j].time+'</span>'+data[i].replay[j].user_name+'</p><p class="fbinfo">'+data[i].replay[j].content+'</p></div>';
                            }
                            comm+='</div>';
                        }
                        comm+='</div>';
                        $("#comm_replay").append(comm);
                    }
                    $(".news_pl").append('<div class="plpost"><p class="saying"><span><a href="javascript:;">共有<ins id="commment_count">'+data.length+'</ins>条评论</a></span>来说两句吧...</p><p class="yname"><span>昵&nbsp;&nbsp;&nbsp;称：</span><input name="username" type="text" class="inputText" id="username" value="" size="16">'+
                    '</p><p class="yzm"><span>邮&nbsp;&nbsp;&nbsp;箱：</span><input id="email" type="text" class="inputText" value="" size="16"></p><p class="yzm"><span>验证码：</span><input id="code" type="text" class="inputText" size="16"><img class="code" src="/blog_system/home/view/tool/getCodeImg.php" onclick="changeCode(this)" alt="验证码" />'+
                    '</p><textarea rows="6" id="saytext"></textarea><input onclick="comment_replay()" type="button" value="提交"></div>');
                }
            })
        }
    })
</script>
</html>
